---
title: Input
package: "@chakra-ui/input"
image: "components/input.svg"
description:
  Input component is a component that is used to get user input in a text field.
---

The `Input` component is a component that is used to get user input in a text
field.

<ComponentLinks
  theme={{ componentName: "input" }}
  github={{ package: "input" }}
  npm={{ package: "@chakra-ui/input" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Input } from "@chakra-ui/react"
```

## Usage

Here's a basic usage example of the `Input` component:

```jsx
<Input placeholder="Basic usage" />
```

### Changing the size of the Input

The `Input` component comes in four sizes. The default is `md`.

- `xs` (`24px`)
- `sm` (`32px`)
- `md` (`40px`)
- `lg` (`48px`)

```jsx
<Stack spacing={3}>
  <Input placeholder="extra small size" size="xs" />
  <Input placeholder="small size" size="sm" />
  <Input placeholder="medium size" size="md" />
  <Input placeholder="large size" size="lg" />
</Stack>
```

### Changing the appearance of the input

The input component comes in 4 variants: `outline`, `unstyled`, `flushed`, and
`filled`. Pass the `variant` prop and set it to one of these values.

```jsx
<Stack spacing={3}>
  <Input variant="outline" placeholder="Outline" />
  <Input variant="filled" placeholder="Filled" />
  <Input variant="flushed" placeholder="Flushed" />
  <Input variant="unstyled" placeholder="Unstyled" />
</Stack>
```

### Left and Right Addons

Like bootstrap, you can add addons to the left and right of the `Input`
component. Chakra UI exports `InputGroup`, `InputLeftAddon`, and
`InputRightAddon` to help with this use case.

```jsx
<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input type="tel" placeholder="phone number" />
  </InputGroup>

  {/* If you add the size prop to `InputGroup`, it'll pass it to all its children. */}
  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input placeholder="mysite" />
    <InputRightAddon children=".com" />
  </InputGroup>
</Stack>
```

### Add elements inside Input

In some scenarios, you might need to add an icon or button inside the input
component. Chakra UI exports `InputLeftElement` and `InputRightElement` to help
with this use case.

If the left or right is an icon or text, you can pass `pointerEvents="none"` to
`InputLeftElement` or `InputRightElement` to ensure that clicking on them
focused the input.

```jsx
<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      children={<PhoneIcon color="gray.300" />}
    />
    <Input type="tel" placeholder="Phone number" />
  </InputGroup>

  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      color="gray.300"
      fontSize="1.2em"
      children="$"
    />
    <Input placeholder="Enter amount" />
    <InputRightElement children={<CheckIcon color="green.500" />} />
  </InputGroup>
</Stack>
```

### Password Input Example

Let's use these components to create a password input with a show/hide password
functionality:

```jsx
function PasswordInput() {
  const [show, setShow] = React.useState(false)
  const handleClick = () => setShow(!show)

  return (
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type={show ? "text" : "password"}
        placeholder="Enter password"
      />
      <InputRightElement width="4.5rem">
        <Button h="1.75rem" size="sm" onClick={handleClick}>
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  )
}
```

### Controlled Input

```jsx
function Example() {
  const [value, setValue] = React.useState("")
  const handleChange = (event) => setValue(event.target.value)

  return (
    <>
      <Text mb="8px">Value: {value}</Text>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
        size="sm"
      />
    </>
  )
}
```

### Changing the focus and error border colors

You can change the border color that shows when the input receives focus
(`focusBorderColor`) and when `isInvalid` is set to `true` (`errorBorderColor`).
The value can be set to a color in the theme object, like `teal.400`, or a raw
CSS value.

```jsx
<Stack spacing={3}>
  <Input focusBorderColor="lime" placeholder="Here is a sample placeholder" />
  <Input
    focusBorderColor="pink.400"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="red.300"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="crimson"
    placeholder="Here is a sample placeholder"
  />
</Stack>
```

## Props

The `Input` component composes [Box](/docs/layout/box) so you can pass all `Box`
props, and `React.InputHTMLAttributes`.

<PropsTable of="Input" />
